/* ************* vue ************* */

im_vm = new Vue({
	el:"#IM-PAGE",
	data: {
		// 表情包：
		"emoji_list":iconfont.emoji_list,

		// 当前登录用户数据
		"login_info":{},

		// 聊天界面 显示/隐藏 状态
		"show_im_main":false,
		// 聊天界面 缩小
		"show_main_sm":false,

		// 主面板 显示/隐藏 状态
		"show_im_master":false,

		// 主面板 导航菜单项
		"master_content_navs":[
			{"icon":"./static/icon/nav-member.png","type":"1","name":"联系人"},
			{"icon":"./static/icon/nav-group.png","type":"2","name":"组群"},
			{"icon":"./static/icon/nav-time.png","type":"3","name":"历史消息"}
		],
		// 当前 主面板 导航菜单项 状态值
		"now_mc_nav_type":1,

		// 主面板-人员分组数据
		"member_group_list":[],
		// 主面板-群数据
		"team_group_list":[],
		"master_logs_list":[],

		// 聊天队列
		"im_json":{},

		// 队列长度
		"im_json_length":0,

		// 当前聊天对象
		"im_main":{},

		// 聊天面板 - 工具栏
		"utils_main_bottom":{
			"emoji":{
				"status":false,
			}
		},

		// 聊天面板 输入框内容
		"im_input_text":"",
		// 输入框光标位置
		"im_input_cursor":0,

		// 当前聊天对象 记录
		"im_main_logs":[]
		
	},
	created:function(){
		var _this = this;

		// 登录
		tz_im.login({
			"success":function(data){
				_this.login_info = data
			}
		});

		// 数据加载：主面板-人员分组数据
		tz_im.buildMasterMemberList({
			"success":function(data){
				_this.member_group_list = data
			}
		});

		// 数据加载：主面板-组群数据
		tz_im.buildMasterTeamList({
			"success":function(data){
				_this.team_group_list = data
			}
		});

		// 数据加载：主面板-历史数据
		tz_im.buildMasterLogsList({
			"success":function(data){
				_this.master_logs_list = data
			}
		});
		
	},
	methods: {
		getJsonLength:function(json_data){
			if(json_data){
				var n = 0;
				for(var k in json_data){
					n++;
				}
				return n;
			}else{
				return 0;
			}
		},

		// 显示/隐藏 主面板
		opShowMaster:function(){
			this.show_im_master = !this.show_im_master;
		},

		// 主面板 - 用户分组展开收齐
		opShowMemberGroup:function(e){
			var index = e.currentTarget.dataset.index;
			var member_group_list = this.member_group_list;
			this.$set( member_group_list[index], 'active', !member_group_list[index]['active'] );

		},
		// 主面板 - 用户分组列表 - 点击某人
		clickMemberGroupItem:function(e){
			var gindex = e.currentTarget.dataset.gindex;
			var index = e.currentTarget.dataset.index;
			var member_group_list = this.member_group_list;
			var member = member_group_list[gindex]['member_list'][index];
			member['key'] = "member_"+member['id'];
			this.appendToMsgPanleList(member);
			this.show_im_main = true;
			this.unShowSmMain();
		},
		// 主面板 - 分组列表 - 点击某项
		clickTeamGroupItem:function(e){
			var index = e.currentTarget.dataset.index;
			var team_group_list = this.team_group_list;
			var team = team_group_list[index];
			team['key'] = "team_"+team['id'];
			this.appendToMsgPanleList(team);
			this.show_im_main = true;
			this.unShowSmMain();
		},
		// 主面板 切换
		changeMasterNav:function(e){
			var type = e.currentTarget.dataset.type;
			console.log(type);
			this.now_mc_nav_type = type;
		},

		// 添加到聊天队列
		appendToMsgPanleList:function(obj){
			var d = {};
			d[obj['key']] = obj;
			this.im_main = obj;
			var im_json = Object.assign({},d,this.im_json);
			this.im_json = im_json;
			this.refImJsonLength();
			this.buildImMainData();
		},
		// 点击 当前聊天队列某项-
		clickImJsonItem:function(e){
			var item_key = e.currentTarget.dataset.key;
			var im_json = this.im_json;
			this.im_main = im_json[item_key];
			// var item = im_json[item_key];
			// this.$delete(this.im_json,item_key);
			// this.appendToMsgPanleList(item);
		},
		// 点击 当前聊天队列某项-移除按钮
		clickRemoveIm:function(e){
			var item_key = e.currentTarget.dataset.key;
			var im_json = this.im_json;
			this.removeIm(im_json[item_key]);

		},
		// 移除 当前聊天队列某项数据
		removeIm:function(obj){
			this.$delete(this.im_json,obj["key"]);

			var im_main = this.im_main;
			var im_json = this.im_json;
			if(this.getJsonLength(this.im_json)<1){
				this.opShowMain();
			}else{
				if(obj['key']==im_main['key']){
					for(var k in im_json){
						this.im_main = im_json[k];
						break;
					}
				}
			}
			this.refImJsonLength();
			this.buildImMainData();
			
		},
		// 计算 当前聊天队列数量
		refImJsonLength:function(){
			this.im_json_length = this.getJsonLength(this.im_json);
		},

		// 显示/隐藏 聊天面板
		opShowMain:function(){
			this.show_im_main = !this.show_im_main;
		},
		// 关闭聊天面板
		closeMain:function(){
			this.im_json = {};
			this.refImJsonLength();
			this.show_im_main = false;
		},
		// 最小化聊天面板
		showSmMain:function(){
			this.show_main_sm = true;
		},
		unShowSmMain:function(){
			this.show_main_sm = false;
		},

		// 点击 当前聊天对象 顶部
		clickMasterTop:function(){
			if(this.show_main_sm){
				this.unShowSmMain();
			}
		},

		// ******* 构建当前聊天对象 相关数据 *************
		buildImMainData:function(){
			var _this = this;
			tz_im.getImLogs({
				"params":{
					"key":this.im_main.key,
				},
				"success":function(data){
					for(var k in data){
						data[k]['content_o'] = data[k]['content'];
						data[k]['content'] = iconfont.replaceRender(data[k]['content']);
					}
					_this.im_main_logs = data;

					setTimeout(function(){
						var dom = document.getElementById('chatMainContent');
						dom.scrollTop = dom.firstChild.offsetHeight;
					},100);
				}
			});
		},


		/* ****** 文本框 方面 ******* */
		// 文本输入
		"editImInputText":function(e){
			this.im_input_text = e.target.value;
		},

		// 发送文本消息
		"sendText":function(e){
			var _this = this;
			if(this.im_input_text!=null&&this.im_input_text!=""){
				tz_im.sendMsg({
					"from":this.login_info.key,
					"from_obj":this.login_info,
					"to":this.im_main.key,
					"to_obj":this.im_main,
					"content":this.im_input_text,
					"type":0,
					"success":function(res){
						_this.buildImMainData();
						_this.im_input_text = "";

						setTimeout(function(){
							tz_im.ls_re_msg(res);
							_this.buildImMainData();
						},1500);
					}
				});
			}
		},

		/* ***** 聊天面板 工具栏 *****  */
		// 显示/隐藏 操作
		"opShowMainUtilsEmoji":function(){
			var utils_main_bottom = Object.assign({},this.utils_main_bottom,{});
			utils_main_bottom['emoji']['status'] = !utils_main_bottom['emoji']['status'];
			this.utils_main_bottom = utils_main_bottom;
		},
		// 选择emoji
		"chooseUtilsEmoji":function(e){
			this.opShowMainUtilsEmoji();
			var index = e.currentTarget.dataset.index;
			var item = emoji_list[index];

			this.im_input_text = iconfont.insertInputTxt("imInputText",this.im_input_text,item.tag);
		},

		// 发送视频
		"uploadVide":function(e){
			var _this = this;
			console.log(e);
			// 使用者自己上传 然后 返回地址 再往下走
			viede_src = "./static/ls/video.mp4";
			viede_img_src = "./static/ls/video_img.jpg";
			tz_im.sendMsg({
				"from":this.login_info.key,
				"from_obj":this.login_info,
				"to":this.im_main.key,
				"to_obj":this.im_main,
				"content":'<video src="'+viede_src+'" poster="'+viede_img_src+'" controls="controls" height="150px">您的浏览器不支持 video 标签。</video>',
				"type":2,
				"success":function(res){
					_this.buildImMainData();
					_this.im_input_text = "";

					setTimeout(function(){
						tz_im.ls_re_msg(res);
						_this.buildImMainData();
					},1500);
				}
			});
		},
		// 发送图片
		"uploadImg":function(e){
			var _this = this;
			console.log(e);
			// 使用者自己上传 然后 返回地址 再往下走
			img_src = "./static/ls/web_im.png";
			tz_im.sendMsg({
				"from":this.login_info.key,
				"from_obj":this.login_info,
				"to":this.im_main.key,
				"to_obj":this.im_main,
				"content":'<img src="'+img_src+'" style="max-height:200px;max-width:200px;"  />',
				"type":1,
				"success":function(res){
					_this.buildImMainData();
					_this.im_input_text = "";

					setTimeout(function(){
						tz_im.ls_re_msg(res);
						_this.buildImMainData();
					},1500);
				}
			});
		},

	}
});